<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>错题生成试卷</title>
  <link rel="stylesheet" href="../../static/css/all.min.css">
  <style>
    /* 基础样式 */
    :root {
      --primary-color: #4361ee;
      --primary-light: #eef2ff;
      --secondary-color: #3a0ca3;
      --accent-color: #f72585;
      --success-color: #4cc9f0;
      --text-color: #2b2d42;
      --text-light: #8d99ae;
      --border-color: #edf2f4;
      --bg-color: #f8f9fa;
      --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      color: var(--text-color);
      line-height: 1.6;
      background-color: var(--bg-color);
      padding: 20px;
    }

    /* 页面容器 */
    .page-container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 12px;
      box-shadow: var(--card-shadow);
      overflow: hidden;
    }

    /* 页面头部 */
    .page-header {
      padding: 20px 30px;
      border-bottom: 1px solid var(--border-color);
      background: var(--primary-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .page-title-container {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .page-icon {
      font-size: 24px;
      color: var(--primary-color);
    }

    .page-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
    }

    .back-button {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: white;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .back-button:hover {
      background: var(--border-color);
    }

    /* 页面主体 */
    .page-body {
      padding: 30px;
    }

    /* 表单区块 */
    .form-section {
      margin-bottom: 30px;
      background: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: var(--card-shadow);
    }

    .section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-color);
    }

    .section-icon {
      width: 28px;
      height: 28px;
      background: var(--primary-light);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-color);
    }

    .section-title {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }

    /* 表单行 */
    .form-row {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
    }

    .form-group {
      flex: 1;
      position: relative;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 500;
    }

    /* 输入框样式 */
    .input-container {
      position: relative;
      display: flex;
      align-items: center;
    }

    .input-icon {
      position: absolute;
      left: 12px;
      color: var(--text-light);
      font-size: 16px;
    }

    .input-unit {
      position: absolute;
      right: 12px;
      color: var(--text-light);
      font-size: 14px;
    }



    input[type="text"]:focus,
    input[type="number"]:focus,
    textarea:focus,
    select:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
    }


    textarea {
      min-height: 100px;
      resize: vertical;
    }

    .textarea-container {
      position: relative;
    }

    .textarea-icon {
      position: absolute;
      top: 12px;
      left: 12px;
      color: var(--text-light);
      font-size: 16px;
    }

    /* 题目类型卡片 */
    .question-type-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }

    .question-type-card {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 20px;
      transition: all 0.2s;
      background: white;
    }

    .question-type-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }

    .type-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .type-icon-container {
      width: 36px;
      height: 36px;
      background: var(--primary-light);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-color);
      font-size: 18px;
    }

    .type-name {
      font-weight: 500;
      font-size: 16px;
    }

    .type-controls {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .stepper-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-stepper {
      width: 36px;
      height: 36px;
      border: 1px solid var(--border-color);
      background: white;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .btn-stepper:hover {
      background: var(--primary-light);
      color: var(--primary-color);
      border-color: var(--primary-color);
    }

    .question-count {
      width: 70px;
      height: 36px;
      text-align: center;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 15px;
      -moz-appearance: textfield;
    }

    .question-count::-webkit-outer-spin-button,
    .question-count::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .points-container {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
    }

    .points-label {
      color: var(--text-light);
    }

    .point-value {
      width: 60px;
      padding: 8px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      text-align: center;
      font-size: 14px;
    }

    /* 总分显示 */
    .total-score-section {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
    }

    .total-score-card {
      display: flex;
      align-items: center;
      gap: 15px;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      padding: 15px 25px;
      border-radius: 10px;
      color: white;
      box-shadow: 0 4px 16px rgba(67, 97, 238, 0.3);
    }

    .total-score-icon {
      font-size: 24px;
    }

    .total-score-content {
      display: flex;
      flex-direction: column;
    }

    .score-label {
      font-size: 14px;
      opacity: 0.9;
    }

    .score-value {
      font-size: 28px;
      font-weight: 700;
    }

    /* 页面底部 */
    .page-footer {
      padding: 20px 30px;
      border-top: 1px solid var(--border-color);
      display: flex;
      justify-content: flex-end;
      gap: 15px;
      background: white;
    }

    .btn {
      padding: 12px 24px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 15px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s;
      border: 1px solid transparent;
    }

    .btn-primary {
      background: var(--primary-color);
      color: white;
    }

    .btn-primary:hover {
      background: var(--secondary-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
    }

    .btn-outline {
      background: white;
      color: var(--text-color);
      border-color: var(--border-color);
    }

    .btn-outline:hover {
      background: var(--bg-color);
    }

    /* 难度选择 */
    .difficulty-selector {
      display: flex;
      gap: 10px;
      margin-top: 15px;
    }

    .difficulty-option {
      flex: 1;
      padding: 10px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .difficulty-option:hover {
      border-color: var(--primary-color);
    }

    .difficulty-option.selected {
      background: var(--primary-light);
      border-color: var(--primary-color);
      color: var(--primary-color);
      font-weight: 500;
    }

    /* 响应式调整 */
    @media (max-width: 992px) {
      .form-row {
        flex-direction: column;
        gap: 15px;
      }

      .question-type-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 768px) {
      body {
        padding: 10px;
      }

      .page-header {
        padding: 15px 20px;
      }

      .page-body {
        padding: 20px;
      }

      .question-type-grid {
        grid-template-columns: 1fr;
      }
    }
    .time-selector-card {
      display: flex;
      align-items: center;
      background: #ffffff;
      border-radius: 10px;
      padding: 15px;
      margin-top: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .time-selector-icon {
      font-size: 24px;
      color: #3f51b5;
      margin-right: 15px;
    }

    .time-selector-content {
      flex-grow: 1;
    }

    .time-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }

    .time-select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 16px;
      background-color: #f9f9f9;
    }
    .time-selector-card {
      display: flex;
      align-items: center;
      background: #ffffff;
      border-radius: 10px;
      padding: 15px;
      margin-top: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .time-selector-icon {
      font-size: 24px;
      color: #3f51b5;
      margin-right: 15px;
    }

    .time-selector-content {
      flex-grow: 1;
    }

    .time-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }

    .time-select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 16px;
      background-color: #f9f9f9;
    }
    /* 正确提示框样式 */
    .alert-success {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      max-width: 80%;
      animation: slideIn 0.3s ease-out forwards;
    }
    .alert-danger {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px 20px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      border: 1px solid #c3e6cb;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      max-width: 80%;
      animation: slideIn 0.3s ease-out forwards;
    }
    .alert-success i {
      margin-right: 10px;
      font-size: 18px;
    }

    .alert-close {
      margin-left: 15px;
      background: none;
      border: none;
      color: inherit;
      font-size: 20px;
      cursor: pointer;
      padding: 0 0 0 10px;
      line-height: 1;
    }

    /* 动画效果 */
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translate(-50%, -30px);
      }
      to {
        opacity: 1;
        transform: translate(-50%, 0);
      }
    }

    @keyframes slideOut {
      from {
        opacity: 1;
        transform: translate(-50%, 0);
      }
      to {
        opacity: 0;
        transform: translate(-50%, -30px);
      }
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    /* 表格容器样式 */
    .table-container {
      width: 100%;
      overflow-x: auto;
      margin-bottom: 20px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
    }

    /* 表格样式 - 与原有系统一致 */
    .error-notes-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    .error-notes-table th,
    .error-notes-table td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
    }

    .error-notes-table th {
      background-color: var(--primary-light);
      font-weight: 600;
      color: var(--text-color);
      position: sticky;
      top: 0;
    }

    .error-notes-table tr:hover {
      background-color: rgba(238, 242, 255, 0.5);
    }

    /* 操作按钮样式 */
    .action-btn {
      padding: 6px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      margin-right: 5px;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
    }

    .action-btn i {
      margin-right: 5px;
      font-size: 12px;
    }

    .view-btn {
      background-color: var(--primary-color);
      color: white;
    }

    .view-btn:hover {
      background-color: var(--secondary-color);
    }

    .delete-btn {
      background-color: #f44336;
      color: white;
    }

    .delete-btn:hover {
      background-color: #d32f2f;
    }

    /* 分页器样式 - 与原有系统完全一致 */
    .pagination-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
    }

    .pagination-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .page-btn {
      min-width: 36px;
      height: 36px;
      padding: 0 8px;
      border: 1px solid var(--border-color);
      background: white;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      color: var(--text-color);
    }

    .page-btn:hover:not(:disabled) {
      background: var(--primary-light);
      border-color: var(--primary-color);
      color: var(--primary-color);
    }

    .page-btn:disabled {
      color: #ccc;
      cursor: not-allowed;
    }

    .page-number {
      display: flex;
      gap: 5px;
    }

    .page-btn.active {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }

    .page-size-selector select {
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background: white;
      font-size: 14px;
    }

    /* 空状态提示 */
    .empty-state {
      text-align: center;
      padding: 30px;
      color: var(--text-light);
    }

    .empty-state i {
      font-size: 36px;
      margin-bottom: 10px;
      opacity: 0.5;
    }
    .pagination-container {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 20px;
      background: white;
      border-top: 1px solid var(--border-color);
      gap: 10px;
    }

    .pagination-controls {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .page-number {
      display: flex;
      gap: 5px;
    }

    .page-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      background: none;
      cursor: pointer;
      transition: all 0.2s;
    }

    .page-btn:hover {
      border-color: var(--primary-color);
      color: var(--primary-color);
    }

    .page-btn.active {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      color: white;
    }

    .page-btn.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .page-input {
      width: 80px !important;
      height: 36px;
      text-align: center;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      margin: 0 10px;
      padding: 0 !important;
    }

    .page-size-selector {
      margin-left: 10px;
    }
    input[type="text"], input[type="number"], textarea, select {
      width: 100%;
      padding: 12px 16px 12px 40px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.2s;
      background: white;
    }
    .page-size-select {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 3px;
      background: #fff;
      cursor: pointer;
      outline: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 16px;
      padding-right: 28px;
    }
    .change {
      width: 50px;
    }
  </style>
</head>
<body>
<!-- 提示框 -->
<div class="alert alert-success" id="success-alert" style="display: none;">
  <i class="fas fa-check-circle"></i>
  <span id="success-message">试卷生成成功！</span>
  <button class="alert-close" onclick="hideAlert('success-alert')">&times;</button>
</div>

<div class="alert alert-danger" id="error-alert" style="display: none;">
  <i class="fas fa-exclamation-circle"></i>
  <span id="error-message">试卷生成失败，请重试</span>
  <button class="alert-close" onclick="hideAlert('error-alert')">&times;</button>
</div>

<!-- 加载指示器 -->
<div id="compact-loader" style="
  position: fixed;
  top:50%;
  left:50%;
  right: 20px;
  width: 240px;
  padding: 12px;
  background: rgba(0,0,0,0.85);
  border-radius: 8px;
  display: none;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s;
  translate: -120px 0px;
  color: white;
  font-family: sans-serif;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
">
  <div class="spinner" style="
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 12px;
  "></div>
  <span class="text">正在AI生成试卷，请稍等</span>
</div>

<div class="page-container">
  <div class="page-header">
    <div class="page-title-container">
      <i class="fas fa-file-alt page-icon"></i>
      <h1 class="page-title">从错题生成试卷</h1>
    </div>
    <button class="back-button" onclick="window.history.back()">
      <i class="fas fa-arrow-left"></i>
      <span>返回</span>
    </button>
  </div>

  <div class="page-body">
    <!-- 试卷基本信息 -->
    <div class="form-section">
      <div class="section-header">
        <div class="section-icon">
          <i class="fas fa-info-circle"></i>
        </div>
        <h2 class="section-title">试卷信息</h2>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label for="paperTitle">试卷标题</label>
          <div class="input-container">
            <i class="fas fa-heading input-icon"></i>
            <input type="text" id="paperTitle" placeholder="例如：我的错题复习试卷" required>
          </div>
        </div>
        <div class="form-group">
          <label for="paperDuration">考试时长</label>
          <div class="input-container">
            <i class="fas fa-clock input-icon"></i>
            <input type="number" id="paperDuration" min="10" value="60" required>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="paperDescription">试卷说明</label>
        <div class="textarea-container">
          <i class="fas fa-align-left textarea-icon"></i>
          <textarea id="paperDescription" rows="3" placeholder="可填写试卷说明或注意事项"></textarea>
        </div>
      </div>
    </div>

    <!-- 错题选择 -->
    <div class="form-section">
      <div class="section-header">
        <div class="section-icon">
          <i class="fas fa-list-check"></i>
        </div>
        <h2 class="section-title">选择错题</h2>
      </div>

      <!-- 错题列表表格 -->
      <div class="table-container">
        <table class="error-notes-table">
          <thead>
          <tr>
            <th width="80px">ID</th>
            <th>题干</th>
            <th width="120px">正确答案</th>
            <th width="120px">错误原因</th>
            <th width="120px">自己答案</th>
          </tr>
          </thead>
          <tbody id="errorNotesTableBody">
          <!-- 动态加载内容 -->
          </tbody>
        </table>
      </div>

      <!-- 分页器 -->
      <div class="pagination-container">
        <div class="pagination-controls">
          <button class="page-btn first" onclick="goToPage(1)">
            <i class="fas fa-angle-double-left"></i>
          </button>
          <button class="page-btn front" onclick="goToPage(currentPage - 1)">
            <i class="fas fa-angle-left"></i>
          </button>
          <div class="page-number" id="pageNumber"></div>
          <button class="page-btn next" onclick="goToPage(currentPage + 1)">
            <i class="fas fa-angle-right"></i>
          </button>
          <button class="page-btn end" onclick="goToPage(totalPages)">
            <i class="fas fa-angle-double-right"></i>
          </button>
        </div>
        <div class="page-size-selector">
          <select class="page-size-select" onchange="changePageSize()">
            <option value="5">5条/页</option>
            <option value="10">10条/页</option>
            <option value="20">20条/页</option>
          </select>
        </div>
        <input type="number" class="page-input" id="pageJump" placeholder="页码" min="1" onchange="jumpToPage()">
        <button class="page-btn change" onclick="jumpToPage()">跳转</button>
      </div>
    </div>
    <!-- 题目数量设置 -->
    <div class="form-section">
      <div class="section-header">
        <div class="section-icon">
          <i class="fas fa-tasks"></i>
        </div>
        <h2 class="section-title">题目设置</h2>
      </div>
      <div class="question-type-grid">
        <!-- 选择题 -->
        <div class="question-type-card" data-type="choice">
          <div class="type-header">
            <div class="type-icon-container">
              <i class="fas fa-check-circle"></i>
            </div>
            <span class="type-name">选择题</span>
          </div>
          <div class="type-controls">
            <div class="stepper-container">
              <button class="btn-stepper minus">-</button>
              <input type="number" id="choiceQuestionNum" min="0" value="5" class="question-count">
              <button class="btn-stepper plus">+</button>
            </div>
            <div class="points-container">
              <span class="points-label">每题分值</span>
              <input type="number" min="1" value="2" class="point-value">
            </div>
          </div>
        </div>

        <!-- 填空题 -->
        <div class="question-type-card" data-type="fill">
          <div class="type-header">
            <div class="type-icon-container">
              <i class="fas fa-pencil-alt"></i>
            </div>
            <span class="type-name">填空题</span>
          </div>
          <div class="type-controls">
            <div class="stepper-container">
              <button class="btn-stepper minus">-</button>
              <input type="number" id="fillQuestionNum" min="0" value="3" class="question-count">
              <button class="btn-stepper plus">+</button>
            </div>
            <div class="points-container">
              <span class="points-label">每题分值</span>
              <input type="number" min="1" value="3" class="point-value">
            </div>
          </div>
        </div>

        <!-- 判断题 -->
        <div class="question-type-card" data-type="judge">
          <div class="type-header">
            <div class="type-icon-container">
              <i class="fas fa-balance-scale"></i>
            </div>
            <span class="type-name">判断题</span>
          </div>
          <div class="type-controls">
            <div class="stepper-container">
              <button class="btn-stepper minus">-</button>
              <input type="number" id="judgeQuestionNum" min="0" value="4" class="question-count">
              <button class="btn-stepper plus">+</button>
            </div>
            <div class="points-container">
              <span class="points-label">每题分值</span>
              <input type="number" min="1" value="1" class="point-value">
            </div>
          </div>
        </div>

        <!-- 简答题 -->
        <div class="question-type-card" data-type="short">
          <div class="type-header">
            <div class="type-icon-container">
              <i class="fas fa-align-left"></i>
            </div>
            <span class="type-name">简答题</span>
          </div>
          <div class="type-controls">
            <div class="stepper-container">
              <button class="btn-stepper minus">-</button>
              <input type="number" id="shortAnswerNum" min="0" value="2" class="question-count">
              <button class="btn-stepper plus">+</button>
            </div>
            <div class="points-container">
              <span class="points-label">每题分值</span>
              <input type="number" min="1" value="5" class="point-value">
            </div>
          </div>
        </div>

        <!-- 计算题 -->
        <div class="question-type-card" data-type="calc">
          <div class="type-header">
            <div class="type-icon-container">
              <i class="fas fa-calculator"></i>
            </div>
            <span class="type-name">计算题</span>
          </div>
          <div class="type-controls">
            <div class="stepper-container">
              <button class="btn-stepper minus">-</button>
              <input type="number" id="calculationNum" min="0" value="2" class="question-count">
              <button class="btn-stepper plus">+</button>
            </div>
            <div class="points-container">
              <span class="points-label">每题分值</span>
              <input type="number" min="1" value="10" class="point-value">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="total-score-section">
      <div class="total-score-card">
        <div class="total-score-icon">
          <i class="fas fa-star"></i>
        </div>
        <div class="total-score-content">
          <div class="score-label">试卷总分</div>
          <div class="score-value" id="totalScore">0</div>
        </div>
      </div>
    </div>
  </div>

  <div class="page-footer">
    <button class="btn btn-outline">
      <i class="fas fa-undo"></i> 重置
    </button>
    <button class="btn btn-primary">
      <i class="fas fa-magic"></i> 生成试卷
    </button>
  </div>
</div>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/jquery.cookie.js"></script>
<script>
  // 分页参数
  let currentPage = 1;
  let pageSize = 5;
  let totalPages = 0;
  let totalItems = 0;
  let list = $.cookie("wronglist");
  let wronglist = [];
  let res = []; // 存储所有错题数据
  let loader = document.getElementById("compact-loader");
  // 初始化错题ID列表
  list = list.split(",");
  for(let i = 0; i < list.length; i++){
    wronglist.push(parseInt(list[i]));
  }

  // 页面加载时初始化
  $(document).ready(function() {
    loadAllErrorQuestions(); // 首次加载获取所有数据
    calculateTotalScore()
  });
  function calculateTotalScore() {
    let total = 0;

    // 选择题总分
    const choiceCount = parseInt(document.getElementById('choiceQuestionNum').value) || 0;
    const choicePoint = parseInt(document.querySelector('[data-type="choice"] .point-value').value) || 0;
    total += choiceCount * choicePoint;

    // 填空题总分
    const fillCount = parseInt(document.getElementById('fillQuestionNum').value) || 0;
    const fillPoint = parseInt(document.querySelector('[data-type="fill"] .point-value').value) || 0;
    total += fillCount * fillPoint;

    // 判断题总分
    const judgeCount = parseInt(document.getElementById('judgeQuestionNum').value) || 0;
    const judgePoint = parseInt(document.querySelector('[data-type="judge"] .point-value').value) || 0;
    total += judgeCount * judgePoint;

    // 简答题总分
    const shortCount = parseInt(document.getElementById('shortAnswerNum').value) || 0;
    const shortPoint = parseInt(document.querySelector('[data-type="short"] .point-value').value) || 0;
    total += shortCount * shortPoint;

    // 计算题总分
    const calcCount = parseInt(document.getElementById('calculationNum').value) || 0;
    const calcPoint = parseInt(document.querySelector('[data-type="calc"] .point-value').value) || 0;
    total += calcCount * calcPoint;

    // 更新总分显示
    document.getElementById('totalScore').textContent = total;
  }

  // 为所有数字输入框添加事件监听
  document.querySelectorAll('.question-count, .point-value').forEach(input => {
    input.addEventListener('change', calculateTotalScore);
    input.addEventListener('input', calculateTotalScore);
  });

  // 为加减按钮添加事件
  document.querySelectorAll('.btn-stepper').forEach(button => {
    button.addEventListener('click', function() {

      const isPlus = this.classList.contains('plus');
      const input = this.parentElement.querySelector('.question-count');
      let value = parseInt(input.value) || 0;

      if (isPlus) {
        value++;
      } else {
        value = Math.max(0, value - 1);
      }

      input.value = value;
      calculateTotalScore();
    });
  });

  // 加载所有错题数据
  function loadAllErrorQuestions() {
    $.ajax({
      url: "/WrongQuestion/GetWrongQuestionByIds",
      type: "post",
      contentType: "application/json",
      data: JSON.stringify(wronglist),
      success: function(response) {
        if (response.code === 200) {
          res = response.data; // 存储所有数据
          totalItems = res.length;
          totalPages = Math.ceil(totalItems / pageSize);
          showErrorCollectionByPage(); // 显示第一页数据
          renderPagination(); // 渲染分页器
        } else {
          alert("加载错题失败：" + response.msg);
        }
      },
      error: function() {
        alert("加载错题信息失败，请联系管理员");
      }
    });
  }

  // 分页展示错题集数据（使用本地数据）
  function showErrorCollectionByPage() {
    const tbody = $("#errorNotesTableBody");
    tbody.empty();

    // 计算当前页数据的起始和结束索引
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize, totalItems);

    // 从本地数据中获取当前页数据
    for(let i = startIndex; i < endIndex; i++) {
      const item = res[i];
      tbody.append(`
      <tr>
        <td>${item.id}</td>
        <td>${item.question}</td>
        <td>${item.correctAnswer}</td>
        <td>${item.errorReason}</td>
        <td>${item.userAnswer}</td>
      </tr>
    `);
    }
  }

  // 渲染分页器
  function renderPagination() {
    const pageNumberDiv = $("#pageNumber");
    pageNumberDiv.empty();

    const maxVisiblePages = 5;
    const halfVisible = Math.floor(maxVisiblePages / 2);
    let startPage = 1;
    let endPage = totalPages;

    if (totalPages > maxVisiblePages + 2) {
      startPage = Math.max(1, currentPage - halfVisible);
      endPage = Math.min(totalPages, currentPage + halfVisible);

      if (currentPage <= halfVisible) {
        endPage = maxVisiblePages;
      } else if (currentPage >= totalPages - halfVisible) {
        startPage = totalPages - maxVisiblePages + 1;
      }
    }

    // 添加页码按钮
    if (startPage > 1) {
      const btn1 = $(`<button class="page-btn ${1 === currentPage ? 'active' : ''}">1</button>`);
      btn1.click(() => goToPage(1));
      pageNumberDiv.append(btn1);

      if (startPage > 2) {
        pageNumberDiv.append('<span class="ellipsis">...</span>');
      }
    }

    // 添加中间页码
    for (let i = startPage; i <= endPage; i++) {
      const btn = $(`<button class="page-btn ${i === currentPage ? 'active' : ''}">${i}</button>`);
      btn.click(() => goToPage(i));
      pageNumberDiv.append(btn);
    }

    if (endPage < totalPages) {
      if (endPage < totalPages - 1) {
        pageNumberDiv.append('<span class="ellipsis">...</span>');
      }
      const btnLast = $(`<button class="page-btn ${totalPages === currentPage ? 'active' : ''}">${totalPages}</button>`);
      btnLast.click(() => goToPage(totalPages));
      pageNumberDiv.append(btnLast);
    }
  }

  // 跳转页码
  function goToPage(page) {
    if (page < 1 || page > totalPages) return;
    currentPage = page;
    showErrorCollectionByPage(); // 直接从本地数据渲染
    renderPagination();
  }

  // 改变每页条数
  function changePageSize() {
    pageSize = parseInt($(".page-size-select").val());
    currentPage = 1;
    totalPages = Math.ceil(totalItems / pageSize);
    showErrorCollectionByPage(); // 直接从本地数据渲染
    renderPagination();
  }

  // 页码跳转（输入框）
  function jumpToPage() {
    const page = parseInt($("#pageJump").val());
    if (isNaN(page) || page < 1 || page > totalPages) {
      alert("请输入有效页码");
      return;
    }
    goToPage(page);
  }
  // 表单提交
  document.querySelector('.btn-primary').addEventListener('click', function() {
    // 验证表单
    const paperName = document.getElementById('paperTitle').value;
    // 获取 datetime-local 的值（格式：YYYY-MM-DDTHH:mm）
    if (!paperName) {
      alert('请填写试卷名称');
      return;
    }
    // 收集表单数据
    const formData = {
      name: paperName,
      duration: document.getElementById('paperDuration').value,
      remark: document.getElementById('paperDescription').value,
      questions: [
        {
          type: '选择题',
          count: document.getElementById('choiceQuestionNum').value,
          score: document.querySelector('[data-type="choice"] .point-value').value
        },
        {
          type: '填空题',
          count: document.getElementById('fillQuestionNum').value,
          score: document.querySelector('[data-type="fill"] .point-value').value
        },
        {
          type: '判断题',
          count: document.getElementById('judgeQuestionNum').value,
          score: document.querySelector('[data-type="judge"] .point-value').value
        },
        {
          type: '简答题',
          count: document.getElementById('shortAnswerNum').value,
          score: document.querySelector('[data-type="short"] .point-value').value
        },
        {
          type: '计算题',
          count: document.getElementById('calculationNum').value,
          score: document.querySelector('[data-type="calc"] .point-value').value
        }
      ],
      wrongQuestions:res,
      totalScore: document.getElementById('totalScore').textContent,
      creator:$.cookie("studentName"),
      sid:$.cookie("student"),
      type:"错题生成"
    };
    loader.style.display = 'flex';
    setTimeout(function(){
      console.log('试卷生成数据:', formData);
      $.ajax({
        type: 'POST',
        url: '/exam/addExam',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function(response) {
          if(response.code == 200){
            $(".alert-success").show()
            setTimeout(function(){
              $(".alert-success").hide()
              window.location.href = "WrongQuestion"
            },1200)
          }
        },error:function (){
          $(".alert-danger").show()
          setTimeout(function(){
            $(".alert-danger").hide()
          },1200)
        }
      })
    },30)

  });

  // 取消按钮
  document.querySelector('.btn-outline').addEventListener('click', function() {
    if (confirm('确定要取消生成试卷吗？所有输入将丢失。')) {
      window.history.back();
    }
  });
</script>
</body>
</html>